<template>
  <f7-page class="user-center">
    <qm-currentcy-navbar title="修改密码"></qm-currentcy-navbar>
    <!-- <f7-navbar>
      <f7-nav-left>
        <f7-link
          back
          icon-material="arrow_back"
        ></f7-link>
      </f7-nav-left>
      <f7-nav-title>修改密码</f7-nav-title>
      <f7-nav-right>
        <f7-link @click="save(pwdModel)">保存</f7-link>
      </f7-nav-right>
    </f7-navbar> -->

    <!-- <f7-list
      inline-labels
      class="form-right"
    >
      <f7-list-input
        label="原密码"
        type="password"
        :value="pwdModel.password"
        @input="pwdModel.password = $event.target.value"
        placeholder="请输入原密码"
        clear-button
      >
        <f7-icon
          material="lock_open"
          slot="media"
        ></f7-icon>
      </f7-list-input>
      <f7-list-input
        label="新密码"
        type="password"
        :value="pwdModel.newPassword"
        @input="pwdModel.newPassword = $event.target.value"
        placeholder="请输入新密码"
        clear-button
      >
        <f7-icon
          material="lock"
          slot="media"
        ></f7-icon>
      </f7-list-input>
      <f7-list-input
        label="确认新密码"
        type="password"
        :value="pwdModel.reNewPassword"
        @input="pwdModel.reNewPassword = $event.target.value"
        placeholder="请再次输入新密码"
        clear-button
      >
        <f7-icon
          material="lock"
          slot="media"
        ></f7-icon>
      </f7-list-input>
    </f7-list> -->
    <van-form>
      <qm-field
        label="原密码"
        name="原密码"
        :rules="[{ required: true, message: '原密码必填！' }]"
        placeholder="请输入原密码"
        required
        label-width="5em"
        v-model="pwdModel.password">
        <template #left-icon>
          <f7-icon
            material="lock_open"
          ></f7-icon>
        </template>
      </qm-field>
      <qm-field
        label="新密码"
        name="新密码"
        :rules="[{ required: true, message: '新密码必填！' }]"
        placeholder="请输入新密码"
        required
        label-width="5em"
        v-model="pwdModel.newPassword">
        <template #left-icon>
          <f7-icon
            material="lock"
          ></f7-icon>
        </template>
      </qm-field>
      <qm-field
        label="确认新密码"
        name="确认新密码"
        :rules="[
                { required: true, message: '请再次输入新密码！' },
                { message: '与新密码不一致', validator: validateRePwd, trigger: 'onChange' }
              ]"
        placeholder="请再次输入新密码"
        required
        label-width="5em"
        v-model="pwdModel.reNewPassword">
        <template #left-icon>
          <f7-icon
            material="lock"
          ></f7-icon>
        </template>
      </qm-field>
    </van-form>
  </f7-page>
</template>
<script>
import controller from "../../libs/framework/controller";
import { Form } from "vant";
export default class instance extends controller {
  onInit() {
    this.urls.save = "/api/base/account/changePassword";
  }
  onBeforeSave(postModel) {
    if (!postModel.password) {
      this.$f7.dialog.toast("请输入原密码");
      return false;
    } else if (!postModel.newPassword) {
      this.$f7.dialog.toast("请输入新密码");
      return false;
    } else if (!postModel.reNewPassword) {
      this.$f7.dialog.toast("请输入确认新密码");
      return false;
    } else if (postModel.newPassword !== postModel.reNewPassword) {
      this.$f7.dialog.toast("两次密码不一致");
      return false;
    } else {
      return true;
    }
  }
  onAfterSave(isSuccess, result) {
    if (isSuccess) {
      this.$framework.account.removeUser();
      this.$framework.redirect.home();
    }
  }
  mixin() {
    return {
      components: {
        [Form.name]: Form
      },
      data() {
        return {
          pwdModel: {
            password: null,
            newPassword: null,
            reNewPassword: null
          }
        };
      },
      methods: {
        validateRePwd(value) {
          return value === this.pwdModel.newPassword;
        }
      }
    };
  }
}
</script>

<style lang="less" scoped>
::v-deep .page-content {
  padding-top: calc(88px * var(--ratio))
}
</style>
